<template>
  <view class="price-info">
    <!-- 价格内容 -->
    <view
      class="price-row"
      v-for="(item, index) in chargeInfoList"
      :key="index"
    >
      <view class="price-item price-item-label">
        <text>
          {{ item.label }}
        </text>
      </view>
      <view class="price-item price-item-content">
        <text class="number">{{ item.value || 0 }}</text>
        <text class="unit">{{ item.unit }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  chargeInfo: {
    type: Object,
    default: () => {
      return {
        TotalPower: 0,
        P: 0,
        VoltageA: 0,
        CurrentA: 0,
      };
    },
  },
});
const chargeInfoList = ref([
  { label: "充电量", value: "0", unit: "kWh", key: "TotalPower" },
  { label: "功率", value: "0", unit: "kW", key: "P" },
  { label: "电压", value: "0", unit: "V", key: "VoltageA" },
  { label: "电流", value: "0", unit: "A", key: "CurrentA" },
]);
watch(
  () => props.chargeInfo,
  (newVal) => {
    if (newVal) {
      chargeInfoList.value = chargeInfoList.value.map((item) => {
        const key = item.key;
        const value = newVal[key];
        return { ...item, value };
      });
    }
  }
);
</script>

<style lang="scss" scoped>
@import "../../style/common.scss";
.price-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .price-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
    // margin-top: 10px;
    .price-item {
      font-size: 14px;
      color: $color-primary;

      .number {
        color: $color-red;
        font-size: 20px;
        font-weight: bold;
      }
      .unit {
        font-size: 12px;
        color: $color-light;
      }
    }
    .price-item-label {
      display: flex;
    }
    .price-item-content {
      margin-top: 5px;
      flex: 2;
    }
  }
}
.pop-container {
  padding: 20px 15px;
  .pop-title {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
  }
  .pop-tip {
    margin-top: 10px;
    color: rgba(213, 155, 124, 1);
    font-size: 12px;
  }
  .label {
    color: rgb(183, 183, 183);
    font-size: 12px;
    margin: 20px 0 10px;
  }
  .paragraph {
    font-size: 12px;
  }
}
.table-title {
  font-size: 12px;
  margin: 20px 0 10px;
}
/* 表格样式 */
.table {
  display: table;
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
  font-size: 12px;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  border: 1px solid #ccc; /* 边框 */
  padding: 10px; /* 内边距 */
  text-align: left; /* 文本对齐方式 */
}
.price-time-data {
  padding: 3px 10px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  &:first-child {
    padding-top: 10px;
  }
  .price-time-data-time,
  .price-time-data-fee {
    flex: 1;
    text-align: center;
    font-size: 14px;
  }
  .price-time-data-fee {
    color: $color-red;
    font-weight: bold;
    font-size: 16px;
  }
}
</style>
